<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传演示</title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
  <form id="demoForm" method="post" enctype="multipart/form-data" action="/upload/file">
    <div>
      <label>上传文件
        <input id="imageFile" type="file" name="imageFile">
      </label>
    </div>
    <button type="submit">上传文件</button>
  </form>
    <img id="image" src="" alt="">
    <script src="js/utils.js"></script>
    <script>
        $("#demoForm").submit(function (){
            console.log("上传文件方法运行")
            // 获得用户选中的文件(数组)
           let files=document.getElementById("imageFile").files;
            // 判断用户是否选择了文件
            if (files.length>0){
                // 用户选中的文件执行上传 单独编写一个方法执行上传
                uploadImage(files[0]);
            }else {
                alert("请选择文件");
            }
            return false;
        })
        // 文件上传的方法
        function uploadImage(file){
            // 构建表单
            let  form=new FormData();
            form.append("imageFile",file);
            // axios 提交数据
            axios({
                url:"/register/upload/image",
                method: "post",
                data: form
            }).then(function (response){
                if (response.data.indexOf("http://") != -1){
                    console.log("上传成功!");
                    $("#image").attr("src",response.data)
                }else {
                    console.log("上传失败")
                }
            })
        }
    </script>
</body>
</html>